<template>
    <div>
        <div class="pt-26px table-container">
            <el-table :data="props.tableData" :default-sort="{ prop: 'searchTotal', order: 'descending' }"
                :row-key="row => row.ID" :reserve-selection="true" :fit="true" :empty-text="noDataStr"
                @selection-change="handleSelectionChange" class="w-full">
                <el-table-column type="selection" label="" align="center" width="60" />
                <el-table-column prop="Title" label="名称" align="center">
                    <template #default="scope">
                        <el-link :href="'#/b2b/article/detail/' + scope.row.ID">{{ isMain(scope.row.PID) }} {{
                            scope.row.Title }}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="Keyword" label="关键词" align="center" width="250">
                    <template #default="scope">
                        {{ scope.row.Keyword }}
                        <div><el-button type="primary" size="small" plain @click="handleSetKeyword(scope.row)">设置关键词</el-button></div>
                    </template>
                </el-table-column>
                <el-table-column prop="CreateTime" label="添加时间" align="center" width="180">
                    <template #default="scope">
                        {{ formatDate(scope.row.CreateTime) }}
                    </template>
                </el-table-column>
                <el-table-column v-if="hasLowerShelfDate" prop="LowerShelfDate" label="撤销时间" align="center" width="180">
                    <template #default="{ row }">
                        {{ formatDate(row.LowerShelfDate) }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="260">
                    <template #default="scope">
                        <el-button :icon="CreditCard" type="primary" text class="!ml-0"
                            @click="handlePromotion(scope.row.ID,scope.row.Keyword)">推广</el-button>
                        <el-button :icon="Edit" type="primary" text class="!ml-0"
                            @click="handleEdit(scope.row.ID)">修改</el-button>
                        <el-button :icon="Delete" type="danger" text class="!ml-0"
                            @click="handleDelete(scope.row.ID)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pt-26px pl-26px pr-26px pb-26px page-container flex justify-between items-center">
            <div class="flex items-center text-12px">
                已选 {{ selectionData.length }} 条数据 <el-button type="primary" text size="small" class="ml-12px"
                    @click="handleBatchPromotion">批量推广</el-button>
            </div>
            <Pagination v-if="tableData.length > 0" v-model:total="page.total" v-model:page="queryParams.curPage" v-model:limit="queryParams.pageSizes" @pagination="handleQuery" />
        </div>
        <SetKeyword v-model:isSetKeyword="state.isSetKeyword" :id="state.articleId" :pid="state.articlePid" :keyword="state.mainKeyword" @closeDialog="handleCloseDialog" />
        <PromotionArticle v-model:isPromotion="state.isPromotion" :id="state.articleId" :ids="selectionData" @closeDialog="handleCloseDialog" />
    </div>
</template>

<script setup lang="ts">
import { Delete, Edit,CreditCard, WarningFilled, SuccessFilled } from '@element-plus/icons-vue'
import Pagination from '@/components/Pagination/index.vue'
import SetKeyword from './SetKeyword.vue'
import { dateFormat } from '@/utils/date'
import { confirmMessageBox } from '@/utils/elMessageBox'
import { deleteArticleApi } from '@/api/b2b'

const props = defineProps({
    tableData: {
        type: Array,
        default: () => []
    },
    noDataStr: {
        type: String,
        default: '暂无已审核技术文章'
    },
    page:{
        type: Object,
        default: () => {}
    }
})

const emit = defineEmits(['update:data'])

const router = useRouter()

const formatDate = computed(() => {
    return function (data: string) {
        return dateFormat(data, 'YYYY-MM-DD HH:mm:ss')
    }
})

// 添加计算属性判断是否有有效的撤销时间
const hasLowerShelfDate = computed(() => {
    return props.tableData.some((row: any) => row.LowerShelfDate !== null);
});

const state = reactive({
    isPromotion: false,
    isSetKeyword:false,
    isLoading:true,
    articleId:0,
    articlePid:0,
    mainKeyword: '',
})

const queryParams = reactive({
    curPage: props.page.curPage,
    pageSizes: props.page.pageSizes,
    limit:props.page.limit,
})

const selectionData = ref([])

async function handleDelete(id: number) {
    confirmMessageBox(WarningFilled, '您确定要删除文章吗？', '','',async () => {
        const res = await deleteArticleApi({
            id: id
        })
        if (res.code === 200) {
            ElMessage({
                type: 'success',
                message: '删除成功!',
            })
            emit('update:data', queryParams)
        }
    })
}

function handleSelectionChange(rows: any) {
    selectionData.value = rows.map((row: any) => row.ID)
}

function handleQuery(val:any) {
    queryParams.limit = val.limit
    emit('update:data', queryParams)
}

async function handleBatchPromotion() {
    if (!selectionData.value.length) {
        confirmMessageBox(WarningFilled, '请选择多个要批量推广的文章？')
    } else {
        state.isPromotion = true
    }
}

function handleEdit(id: number) {
    router.push({
        path: '/b2b/article/edit/' + id
    })
}

function handlePromotion(id:number,keyword:string){
    if(!keyword){
        confirmMessageBox(WarningFilled, '请设置这条文章的关键词后，才能推广', '','',() => {
            state.isSetKeyword = true
            state.articleId = id
        })
    }else{
        state.isPromotion = true
        state.articleId = id
    }
}

function isMain(id: number) {
    if (id === 0) {
        return '【主】'
    }
}

function handleSetKeyword(keyword:any){
    state.isSetKeyword = true
    state.articleId = keyword.ID
    state.articlePid = keyword.PID
    state.mainKeyword = keyword.Keyword
}

function handleCloseDialog(){
    state.isSetKeyword = false
    state.isPromotion = false
    selectionData.value = []
    emit('update:data', queryParams)
}

</script>

<style scoped></style>